<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 需求：
             v-big:保留v-text功能，且将v-text中的值放大十倍 
             v-fbind:保留v-bind的功能，且一开始输入框就要有焦点
    -->
    <div id="root">
        <h2>当前n的值为:<span v-text="n"></span></h2>
        <h2>放大10倍之后的n:<span v-big="n"></span></h2>
        <!-- <h2>放大100倍之后的n:<span v-fbind="n"></span></h2> -->
        <button @click="n++">点我n++</button><hr>
        <input type="text" v-fbind:value="n">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue在启动的时候生成生产提示
        /*定义全局自定义指令，所有Vue实例都可以用
        Vue.directive('fbind',{
            //指令成功与元素绑定时(一上来就调用一次)
            bind(element,binding){
                element.value = binding.value;
                console.log('success')
            },
            //当element插入到页面上时
            inserted(element,binding){
                element.focus();
            },
            //模板重新解析时(确保数据准确性)
            update(element,binding){
                element.value = binding.value;
                console.log("update")
            }
        })*/


        const vm = new Vue({
            el:"#root",
            data:{
                n:1,
            },
            directives:{
                //自定义指令：
                //函数何时会被调用？1、指令成功与元素绑定时(一上来就调用一次)  2、模板重新解析时(确保数据准确性)
                big(element,binding){
                    element.innerText = binding.value*10;
                },
                //对象形式
                fbind:{
                    //指令成功与元素绑定时(一上来就调用一次)
                    bind(element,binding){
                        element.value = binding.value;
                        console.log('success')
                    },
                    //当element插入到页面上时
                    inserted(element,binding){
                        element.focus();
                    },
                    //模板重新解析时(确保数据准确性)
                    update(element,binding){
                        element.value = binding.value;
                        console.log("update")
                    }
                }
            }
        })
    </script>
</body>
</html>